<template>
    <div class="login-box">
      <div class="login-form">
          <el-input
            v-model="username"
            placeholder="请输入用户名或邮箱"
            prefix-icon="el-icon-message"
        />
        <el-input
            v-model="password"
            show-password
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
        />
        <el-button class="login-btn" @click="login" type="success" round>登陆</el-button>
      </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            username: '',
            password: '',
        };
    },
    methods: {
        login() {
            const { username = '', password = '' } = this;
            if (username === '') {
                this.$message.error('用户名不能为空');
                return;
            }
            if (password === '') {
                this.$message.error('密码不能为空');
                return;
            }
            axios({
                url: '/api/login',
                method: 'POST',
                data: {
                    username,
                    password,
                }
            }).then((res) => {
                const { code, data, msg } = res.data;
                if (Number(code) === 0) {
                    const { msg: successMsg } = data;
                    this.$message({
                        type: 'success',
                        message: successMsg,
                    });
                    this.$router.push({
                        path: '/mine'
                    });
                } else {
                    this.$message.error(msg);
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.login-box {
    position: relative;
    height: 100%;
    .login-form {
        width: 480px;
        display: inline-block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin: auto;
        border: solid 1px #999;
        padding: 64px 64px;
        transform: translateY(-50%);
        /deep/ .el-input {
            margin: 12px 0;
        }
        /deep/ .login-btn {
            width: 100%;
            margin-top: 24px;
        }
    }
}
</style>